﻿
var ModelView = Backbone.View.extend({
    className: 'modal',
    contentView: new Backbone.View(),
    events: {
        'click .close': 'close'
    },
    close: function (e) {
        this.contentView.remove();
        this.remove();
    },
    renderHeader: function () {
        return '<div class="modal-header"><button type="button" class="close" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div>';
    },
    renderContent: function () {
        return $('<div>').addClass('modal-body').append(this.contentView.render().el);
    },
    renderFooter: function () {
        return '<div class="modal-footer"><button type="button" class="close btn" aria-hidden="true">Close</button></div>';
    },
    render: function () {
        this.$el.append(this.renderHeader());
        this.$el.append(this.renderContent());
        this.$el.append(this.renderFooter());
        return this;
    }
});
var RateItemView = Backbone.View.extend({
    tagName: 'tr',
    initialize:function() {
        this.editMode = false;
    },
    events: {
        
        'click a.edit':'editMode',
        'click .delete': 'delete'
    },
    editMode: function(e) {
        this.edtiMode = true;
        this.render();
    },
    delete: function (e) {
        var self = this;
        this.$el.fadeOut('slow', function() {

            self.model.destroy();
            self.remove();
        });
    },
    renderCell: function (text, tag) {
        var foo = $('<td>');
        
        if (this.editMode && !tag ) {
            foo.append('<input type="text" vauel="' + text + '"/>');
            return foo;
        }
        
        if (typeof (tag) !== 'undefined') {
            $(tag).text(text).appendTo(foo);
        }
        else {
            foo.text(text);
        }
        
        return foo;
    },
    render: function () {
        this.$el.empty();
        this.$el.append(this.renderCell(this.model.get('name')));
        this.$el.append(this.renderCell(this.model.get('rate')));
        this.$el.append(this.renderCell('Delete', $('<a class="delete" href="#">')));
        this.$el.append(this.renderCell('Edit', $('<a class="edit" href="#">')));
        return this;
    }
});
var RatesView = Backbone.View.extend({
    tagName: 'table',
    className: 'table table-hover',
    events: { 
        'click .add': 'add'
    },
    initialize: function () {
        this.listenTo(this.collection, 'all', this.render);
    },
    add: function (e) {
        this.collection.create(
        $(e.target).closest('form').serializeObject());
    },
    renderInsertForm: function () {
        return $('<form>')
            .append($('<input type="text" name="name">'))
            .append($('<input type="text" name="rate">'))
            .append("<a class='btn add'>add</a>").appendTo($('<td>').appendTo('<tr>'));
    },
    render: function () {
        this.$el.empty();

        var self = this;

        this.collection.each(function (item) {

            new RateItemView({
                model: item,
                parent: self
            })
             .render().$el.appendTo(self.$el);

        });

        this.renderInsertForm().appendTo(this.$el);
        return this;
    }
});